<div modelingsdk-focus-element (focused)="onChange($event)">
<h3>{{'SDK.JSON_SCHEMA_EDITOR.BASIC_ATTRIBUTES' | translate}}</h3>

<div class="modelingsdk-json-schema-basic-attributes">
    <div *ngFor="let item of typeAttributes| keyvalue" class="modelingsdk-json-schema-basic-attributes-item">
        <div class="ama-modeled-object-input-label adf-property-label">
            {{typeAttributes[item.key].name | translate}}
        </div>
        <modelingsdk-value-type-input [(ngModel)]="value[item.key]"
            [placeholder]="typeAttributes[item.key].name | translate" [model]="typeAttributes[item.key].model"
            [type]="typeAttributes[item.key].type"
            [extendedProperties]="typeAttributes[item.key].type === 'enum' ? {nullSelectionAllowed: true} : null">
        </modelingsdk-value-type-input>
    </div>
</div>

<h3 *ngIf="allowCustomAttributes">
    <span>{{'SDK.JSON_SCHEMA_EDITOR.CUSTOM_ATTRIBUTES' | translate}}</span>
    <button matTooltip="{{'SDK.JSON_SCHEMA_EDITOR.ADD_CUSTOM_ATTRIBUTE' | translate}}" mat-button mat-icon-button
        color="primary" (click)="addCustomNode()" *ngIf="!addingCustomProperty"
        class="modelingsdk-json-schema-custom-attributes-add-btn">
        <mat-icon>add</mat-icon>
    </button>
</h3>

<div *ngIf="allowCustomAttributes" class="modelingsdk-json-schema-custom-attributes">
    <div *ngFor="let item of customAttributesKeys" class="modelingsdk-json-schema-custom-attributes-item">
        <mat-form-field [floatLabel]="'auto'">
            <mat-label>{{item}}</mat-label>
            <input matInput [value]="value[item] | json" (blur)="changeCustomProperty(item,$event)"
                [placeholder]="item" />
        </mat-form-field>
        <div>
            <button mat-button mat-icon-button type="link" (click)="deleteCustomNode(item)"
                matTooltip="{{'SDK.JSON_SCHEMA_EDITOR.DELETE_CUSTOM_ATTRIBUTE' | translate}}">
                <mat-icon>delete</mat-icon>
            </button>
        </div>
    </div>
    <div class="modelingsdk-json-schema-custom-attributes-item-add" *ngIf="addingCustomProperty">
        <mat-form-field>
            <mat-label>{{'SDK.JSON_SCHEMA_EDITOR.ATTRIBUTE_NAME' | translate}}</mat-label>
            <input matInput slot="label" [(ngModel)]="addProp.key" />
        </mat-form-field>
        <mat-form-field>
            <mat-label>{{'SDK.JSON_SCHEMA_EDITOR.ATTRIBUTE_VALUE' | translate}}</mat-label>
            <input matInput [(ngModel)]="addProp.value" />
        </mat-form-field>
        <div class="modelingsdk-json-schema-custom-attributes-item-add-actions">
            <button mat-button mat-icon-button (click)="confirmAddCustomNode()"
                matTooltip="{{'SDK.JSON_SCHEMA_EDITOR.CONFIRM_ATTRIBUTE_ADDITION' | translate}}">
                <mat-icon>check</mat-icon>
            </button>
            <button mat-button mat-icon-button (click)="initializeCustomProperty()"
                matTooltip="{{'SDK.JSON_SCHEMA_EDITOR.CANCEL_ATTRIBUTE_ADDITION' | translate}}">
                <mat-icon>close</mat-icon>
            </button>
        </div>
    </div>
</div>

<h3 *ngIf="allowAttributesPreview">{{'SDK.JSON_SCHEMA_EDITOR.PREVIEW' | translate}}</h3>
<pre *ngIf="allowAttributesPreview">{{previewNode()}}</pre>
</div>
